<template>
    <div style="height: 100%">
        <wl-content-top>
            <template slot="header">
                <slot></slot>
            </template>
            <template slot="body">
                <Row class="wl-content">
                    <Col span="24" class="">
                        <div class="wl-content-group">
                            <Button class="wl-content-button" type="primary" @click="addAction">新增</Button>
                            <Button type="error" @click="delSelect">批量删除</Button>
                        </div>
                    </Col>
                    <Col span="24" >
                        <Table border stripe ref="selection" :loading="loading" :columns="tableOptions.tableHeader" :data="tableOptions.tableData" @on-selection-change="tableSelectChange">
                            <template slot="action" slot-scope="{ row }">
                                <Button class="wl-content-button" type="primary" size="small" @click="editAction(row)">编辑</Button>
                                <Button type="error" size="small" @click="delOne(row.id)">删除</Button>
                            </template>
                        </Table>
                    </Col>
                </Row>
                <Row type="flex" justify="space-between" class="wl-footer">
                    <Col span="14">
                        <Button  @click="handleSelectAll(true)" class="wl-content-button">全选</Button>
                        <Button @click="handleSelectAll(false)">取消</Button>
                    </Col>
                    <Col span="10">
                        <Page :total="pageOptions.totalRecord" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
                    </Col>
                </Row>
            </template>
        </wl-content-top>
        <wl-model-form :show="modelFormShow" :options="formOptions" @result="formResult" @cancelShow="cancelShow" ref="wlModelForm"></wl-model-form>
    </div>
</template>
<script>
export default {
  name: 'WlResource',
  props: {
    tableOptions: {
      type: Object
    },
    formOptions: {
      type: Object
    },
    pageOptions: {
      totalRecord: 0
    },
    loading: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      value: '',
      modelFormShow: false,
      formData: {},
      page: {
        pageSize: 10,
        page: 1
      },
      apiResult: {}
    }
  },
  mounted () {
    this.formData = JSON.parse(JSON.stringify(this.formOptions.formData))
  },
  methods: {
    resultFater (data, type) {
      this.$emit('result', { type: type, data: data })
    },
    getTemplateList (param) {
      this.resultFater(param, 'list')
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      this.selectData = selection
    },
    formResult (data) {
      this.resultFater(data, 'form')
    },
    cancelShow () {
      this.modelFormShow = false
    },
    editAction (row) {
      this.formDataOption.formData = {
        id: row.id,
        title: row.title,
        content: row.content
      }
      this.modelFormShow = true
    },
    addAction () {
      this.formOptions.formData = JSON.parse(JSON.stringify(this.formData))
      this.modelFormShow = true
    },
    pageChange (e) {
      this.page.page = e
      this.getTemplateList(this.page)
    },
    pageSizeChange (e) {
      this.page.pageSize = e
      this.page.page = 1
      this.getTemplateList(this.page)
    },
    delSelect () {
      let delList = this.selectData
      let ids = []
      if (delList.length <= 0) {
        this.$Message.error('请选择要删除的数据')
        return false
      }
      delList.forEach((item, index) => {
        ids.push(item.id)
      })
      this.resultFater({ ids: ids }, 'delete')
    },
    delOne (id) {
      this.resultFater({ ids: [id] }, 'delete')
    }
  }
}
</script>

<style scoped lang="less">
    .wl-content{
        margin-bottom: 10px;
        &-group{
            margin: 10px;
        }
        &-button{
            margin-right: 10px;
        }
    }

</style>
